<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>视频管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-row>
        <el-col>
          <el-button type="primary" marder='10px' @click="dialogVisible = true">添加视频</el-button>
        </el-col>
      </el-row>

      <el-table :data="tableData" border style="width: 100%"  marder-top='10px'>
        <el-table-column prop="id" label="Id" width="60"></el-table-column>
        <el-table-column prop="name" label="电影名称" width="120"></el-table-column>
        <el-table-column prop="score" label="评分" width="60"></el-table-column>
        <el-table-column prop="releaseTime" label="发布时间" width="150"></el-table-column>
        <el-table-column prop="videoUrl" label="电影播放地址"></el-table-column>
        <el-table-column prop="imgUrl" label="封面图片地址"></el-table-column>
        <el-table-column prop="address" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="movieDelete(scope.row.id)" type="text" size="small">删除</el-button>
            <el-button type="text" size="small" @click="movieChange(scope.row.id)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        @next-click='nextPage'
        @prev-click='prePage'
        :page-size='5'
        :total="pageTobal">
      </el-pagination>
      <el-dialog title="添加视频" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
        
        <el-form ref="addFormref" :model="addForm" label-width="130px">
          <el-form-item label="电影Id" prop="id">
            <el-input v-model="addForm.id" disabled></el-input>
          </el-form-item>
          <el-form-item label="电影名称" prop="name">
            <el-input v-model="addForm.name"></el-input>
          </el-form-item>
          <el-form-item label="评分" prop="score">
            <el-input v-model="addForm.score"></el-input>
          </el-form-item>
          <el-form-item label="发布时间" prop="releaseTime" >
            <el-input v-model="addForm.releaseTime" type="Date"></el-input>
          </el-form-item>
          <el-form-item label="电影播放地址" prop="videoUrl">
            <el-input v-model="addForm.videoUrl"></el-input>
          </el-form-item>
          <el-form-item label="封面图片地址" prop="imgUrl">
            <el-input v-model="addForm.imgUrl"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addMovie">确 定</el-button>
        </span>
      </el-dialog>

      <el-dialog title="修改信息" :visible.sync="editDialogVisible" width="50%" @click="editDialogClosed">

        <el-form ref="editFormref" :model="editForm" label-width="100px">
          <el-form-item label="电影Id">
            <el-input v-model="editForm.id" disabled></el-input>
          </el-form-item>
          <el-form-item label="电影名称">
            <el-input v-model="editForm.name"></el-input>
          </el-form-item>
          <el-form-item label="评分">
            <el-input v-model="editForm.score"></el-input>
          </el-form-item>
          <el-form-item label="发布时间">
            <el-input v-model="editForm.releaseTime" type="Date"></el-input>
          </el-form-item>
          <el-form-item label="电影播放地址">
            <el-input v-model="editForm.videoUrl"></el-input>
          </el-form-item>
          <el-form-item label="封面图片地址">
            <el-input v-model="editForm.imgUrl"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editUserInfo">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {getMovies, addMovie,getMoviesDelete,moviesChange} from '@/api/movie'
export default {
  name:'VideoManagement',
  data(){
    return{
        tableData: [],
        dialogVisible: false,
        pageTobal:0,
        currentpage:1,
        addForm:{
          id:'',
          name:'',
          score:'',
          releaseTime:'',
          videoUrl:'',
          imgUrl:''
        },
        editDialogVisible: false,
        editForm:{}//存放修改信息
    } 
  },
  created(){
    this.getDataByPage(1);
    this.addMovie();
    // this.movieDelete()
  },
   methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      addMovie(){
        addMovie(this.addForm).then(res=>{ //请求添加电影
          // console.log(res)
          this.dialogVisible = false;
          this.getDataByPage()
        })
      },
      movieDelete(id){ //删除电影
        getMoviesDelete(id).then(res=>{
          // console.log(res)
          this.$confirm('此操作将永久删除该电影, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getDataByPage()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
        })
      },
      editUserInfo(){moviesChange()},
      movieChange(id){  //修改电影列表
        this.editDialogVisible=true;
        console.log(id)
        moviesChange(this.editForm).then(res=>{
          let move = res.data
         this.editForm.name
          
        })
      },
      editDialogClosed(){
        this.$refs.editFormref.resetFields()
      },
      getDataByPage(page){
        let size =5
        getMovies({"pageNum": page,"pageSize": size}).then(res=>{ //获取电影列表和分页设置
        let dataList = res.data.data.list
        this.pageTobal = res.data.data.pageNumber
        this.tableData = dataList.slice(0,dataList.length)
        })
      },
      nextPage(){
        this.currentpage = this.currentpage+1;
        this.getDataByPage(this.currentpage);
      },
      prePage(){
        this.currentpage = this.currentpage-1;
        this.getDataByPage(this.currentpage)
      },
      
    }
}
</script>

<style scoped>
   .el-table{
    margin-top: 15px;
  }
</style>